<!-- 详情页 -->
<template>
  <div class="detail">
    <!-- <DetailNavBar></DetailNavBar> -->
    <!-- <div class="phonebox">
      <a :href="'tel:' + 4009001339">咨询电话：4009001339</a>
    </div>-->
    <div class="detailList">
      <!-- 图片轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in details.image" :key="index">
          <img :src="item" alt />
        </van-swipe-item>
      </van-swipe>

      <!-- 详情 -->
      <van-divider dashed>基本信息</van-divider>
      <div class="detailBox">
        <h2>{{details.infotitle}}</h2>
        <h5>
          促销价:
          <b>{{`￥${details.selling_price}`}}</b>

          <s>{{`￥${details.market_price}`}}</s>
        </h5>

        <h6>{{details.norm_name}}</h6>
        <h6>
          商品型号:
          <span>{{details.specs}}</span>
        </h6>
        <h6>
          库存:
          <span>{{details.goods_stock}}{{details.goods_unit}}</span>
        </h6>
        <h6>
          货期:
          <span>{{details.delivery_time}}</span>个工作日
        </h6>
      </div>
      <van-divider dashed>规格参数</van-divider>
      <div v-html="info.parameter" class="paramebox"></div>
    </div>
    <!-- <div>
      <div>
        <h4>{{details.title}}</h4>
      </div>
      <div class="imgbox">
        <img :src="details.logo" alt />
      </div>
    </div>-->
    <!-- 底部加入购物车 -->
    <DetailTabBar @addcart="addTocart" @addcollect="addToCollect" :loading='loading'></DetailTabBar>
  </div>
</template>

<script>
import DetailNavBar from "./component/DetailNavBar";
import DetailTabBar from "./component/DetailTabBar";
import { Details } from "@/network/detail";
export default {
  data() {
    return {
      loading:false,
      id: null,
      pid: null,
      // loading: false,
      _info: Number,
      info: {},
      brand: {},
      image: [],
      details: {},
      user_id: this.$store.state.user_id
    };
  },
  components: {
    DetailNavBar,
    DetailTabBar
  },

  methods: {
    //加入收藏
    addToCollect() {
      let user_id = this.$store.state.user_id;
      let product_id = this.$route.query.id;

      console.log("收藏");
      this.$http({
        method: "post",
        url: "index/web/addCollection",
        data: {
          user_id,
          product_id
        }
      })
        .then(res => {
          console.log(res);
          this._info = res.data.data.info;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //1.加入购物车
    async addTocart() {
      this.loading = true
      if (window.localStorage.getItem("user_id")) {
        let user_id = window.localStorage.getItem("user_id");
        console.log("-----------------------");
        await this.$http({
          method: "post",
          url: "index/web/addToCart",
          headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
          data: {
            user_id,
            num: 1,
            product_id: this.$route.query.id
          }
        })
          .then(res => {
            let _data = res.data;
            console.log(res);
            if (_data.State.Code == 200) {
              this.loading = false
              this.$Notify({ type: "success", message: "加入购物车成功" });
            } else if (res.config.data.user_id == "") {
              this.$router.push("/login");
            } else {
              this.$Notify({ type: "danger", message: _data.State.message });
              // this.$router.push({ path: "/mine" });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }else{
        this.$router.push('/login')
      }
    },
    async getDetailInfo() {
      // this.loading = true;
      //1.保存传入的id
      let { id, pid } = this.$route.query;
      //2.请求数据
      await this.$http({
        method: "post",
        url: `home/goods_details/index`,
        headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
        data: {
          id,
          pid
        }
      })
        .then(res => {
          this.loading = false;
          const DATA = res.data.data;
          this.info = DATA.info;
          this.brand = DATA.brand;
          //获取图片信息
          this.image = DATA.info.image.split("|");
          this.details = new Details(
            DATA.info,
            DATA.brand,
            DATA.info.image.split("|")
          );
          console.log(DATA.info.image.split("|"), "详情获取的数据");
          console.log(DATA, "详情获取的数据");
          console.log(this.details, "面向对象的数据");

          // this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.getDetailInfo();
  }
};
</script>
<style lang='scss' scoped>
.detail {
  width: 100%;
  height: 100%;
  margin-bottom: 1.3rem;
  .detailList {
    .my-swipe {
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
  .van-divider {
    color: #1989fa;
  }
  .detailBox {
    font-weight: 600;
    margin-left: 25px;
    margin-top: 15px;
    margin-bottom: 15px;
    h2 {
      font-size: 20px;
      margin-top: 15px;
      margin-bottom: 15px;
      font-weight: 800;
    }
    h6 {
      margin-top: 15px;
      margin-bottom: 15px;
    }
    b {
      font-size: 18px;
      color: red;
      margin-right: 15px;
      font-weight: 700;
    }
  }
}
.paramebox {
  width: 100vw;
  max-height: 600px;
  margin-bottom: 2rem;
}
.phonebox {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  width: 100vw;
  height: 1.5rem;
  font-size: 18px;

  line-height: 1.5rem;
  background-color: #1989fa;
  text-align: center;
  a {
    color: #fff;
  }
}
</style>
<style lang="scss">
.paramebox {
  width: 100vw;
  max-height: 600px;
  margin-bottom: 2rem;
  img {
    width: 100%;
  }
}
</style>